<template>
  <el-drawer
      :visible="visibleMessage"
      @close="drawerClose"
      size="40%"
      :with-header="false">
    <div style="padding: 10px" v-infinite-scroll="load">
      <el-card v-for="item in messageList" style="margin-bottom: 10px" :key="item.id">
        <div class="message_content">
          <div class="content_item">
            <div> {{ item.creationTime }}</div>
          </div>
          <div class="content_item">
            <span>{{ $t('订单编号') + ' : ' }}</span>
            <span>{{ item.loanRecordId }}</span>
          </div>
          <div class="content_item">
            <span>{{ $t('用户姓名') + ' : ' }}</span>
            <span>{{ item.name }}</span>
          </div>
          <div class="content_item">
            <span>{{ $t('承诺还款时间') + ' : ' }}</span>
            <span>{{ item.commitmentTime }}</span>
          </div>
          <div class="message_link">
            <el-badge value="new" v-show="item.valid === 1" style="margin-right: 10px"></el-badge>
            <el-link type="primary" @click="lookDetails(item)">{{ $t('查看详情') }}</el-link>
          </div>
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>

<script>
import eventBus from "@/utils/eventBus";
import {fetchMessageRemind,messageViewDetails} from '@/api/system'
export default {
  props: {
    visibleMessage: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      messageList: [],
      page: {
        pageNum: 1,
        pageSize: 2
      },
      infiniteLoad: true
    }
  },
  watch: {
    visibleMessage(value) {
      if (value) {
        this.getMessageList()
      }
    }
  },
  methods: {
    async getMessageList() {
      const {pageNum, pageSize} = this.page
      const res = await fetchMessageRemind({
        pageNum,
        pageSize
      })
      if (res.code === 1) {
        const {list, } = res.data
        if (this.messageList.length === list.length) {
          this.infiniteLoad = false
        } else {
          this.infiniteLoad = true
        }
        this.messageList = list
      }
    },
    // 查看详情
    async lookDetails({id, jumpUrl, loanRecordId}) {
      const res = await messageViewDetails({id})
      if (res.code === 1) {
        eventBus.$emit('viewDetails', true)
        this.$emit('update:visibleMessage', false)
        this.drawerClose()
        this.$store.commit('SET_MESSAGE_ORDERID', loanRecordId)
        if ('/' + jumpUrl !== this.$route.path) {
          this.$router.push({
            path: '/' + jumpUrl,
          })
        }
      }
    },
    load() {
      const { pageSize} = this.page
      if (this.infiniteLoad) {
        this.page = {
          pageSize: pageSize + 10
        }
        this.getMessageList()
      }
    },
    drawerClose() {
      this.$emit('update:visibleMessage', false)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-drawer {
  overflow: auto;
}

.el-card__body {
  position: relative;
}

.message_content {
  position: relative;

  .content_item {
    margin: 8px 0;
  }

  .message_link {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
